<template>
	<div id="home" class="mui-control-content mui-active">
		<div class="mui-slider" id="slider">
			<div class="mui-slider-group mui-slider-loop">
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img :src="sliderList[sliderList.length - 1].src">
						<p class="mui-slider-title">{{sliderList[sliderList.length - 1].text}}</p>
					</a>
				</div>
				<div class="mui-slider-item" v-for="(item,idx) in sliderList">
					<a href="javascript:;">
						<img :src="item.src" />
						<p class="mui-slider-title">{{item.text}}</p>
					</a>
				</div>
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img :src="sliderList[0].src">
						<p class="mui-slider-title">{{sliderList[0].text}}</p>
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator mui-text-right">
				<div class="mui-indicator" v-for="item in sliderList"></div>
			</div>
		</div>
		<h3>图文表格</h3>
		<!--表格列表-->
		<ul class="mui-table-view mui-grid-view">
		    <li class="mui-table-view-cell mui-media mui-col-xs-6">
		        <a href="#">
		            <img class="mui-media-object" src="http://placehold.it/400x300">
		            <div class="mui-media-body">文字说明1</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-6">
		        <a href="#">
		            <img class="mui-media-object" src="http://placehold.it/400x300">
		            <div class="mui-media-body">文字说明2</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-6">
		        <a href="#">
		            <img class="mui-media-object" src="http://placehold.it/400x300">
		            <div class="mui-media-body">文字说明1</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-6">
		        <a href="#">
		            <img class="mui-media-object" src="http://placehold.it/400x300">
		            <div class="mui-media-body">文字说明2</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-6">
		        <a href="#">
		            <img class="mui-media-object" src="http://placehold.it/400x300">
		            <div class="mui-media-body">文字说明1</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-6">
		        <a href="#">
		            <img class="mui-media-object" src="http://placehold.it/400x300">
		            <div class="mui-media-body">文字说明2</div>
		        </a>
		    </li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'index',
		data() {
			return {
				sliderList: [{
					text: "幸福就是可以一起睡觉",
					src: "http://www.dcloud.io/hellomui/images/shuijiao.jpg"
				}, {
					text: "静静看这个世界",
					src: "http://www.dcloud.io/hellomui/images/yuantiao.jpg"
				}]
			}
		},
		created() {
			mui.init();
			// slider
			setTimeout(() => {
				var slider = mui("#slider");
				slider.slider({
					interval: 4000
				});
			},100);
		}
	}
</script>

<style scoped>
	h3{
		font-size: 18px;
		font-weight: normal;
		line-height: 30px;
		text-indent: 10px;
	}
</style>